import React from 'react'
import {  NavLink,Routes,Route } from 'react-router-dom'

export default function Page1() {
  return (
    <div>
       {/* isActive注意需要解构 */}
       {/* 添加end 不是说匹配到一个就不在向下匹配 而是会精确匹配 */}
       <NavLink end to='style' style={({isActive})=> isActive?{background:'red'}:{}}>ActiveStyle</NavLink>
       <NavLink end to='className'  className={({isActive})=>{return isActive?'activeClass':''}}>ActiveClass</NavLink> 
       <NavLink end className={({isActive})=>{return isActive?'activeClass':''}} to='/NavLink1'>基本用法</NavLink>
       <NavLink end  style={({isActive})=> isActive?{background:'red'}:{}} to='/NavLink1/NavLink11'>/NavLink1/NavLink11</NavLink>
       <NavLink end style={({isActive})=> isActive?{background:'red'}:{}} to='/NavLink1' replace={true}>replace</NavLink>
       <NavLink end style={({isActive})=> isActive?{background:'red'}:{}} to='.' >.</NavLink>
       <NavLink end style={({isActive})=> isActive?{background:'red'}:{}} to='..' >..</NavLink>
       <NavLink end style={({isActive})=> isActive?{background:'red'}:{}} to='.NavLink1' >.NavLink1</NavLink>
       <NavLink end style={({isActive})=> isActive?{background:'red'}:{}} to='..NavLink1' >..NavLink1</NavLink>
       <NavLink end style={({isActive})=> isActive?{background:'red'}:{}} to='../NavLink1' >../NavLink1</NavLink>
       <NavLink end style={({isActive})=> isActive?{background:'red'}:{}} to='./NavLink1' >./NavLink1</NavLink>
       <NavLink end style={({isActive})=> isActive?{background:'red'}:{}} to='NavLink1'>NavLink1</NavLink>
       <Routes>
        {/* 这个表示NavLink子路由的默认  如果没有/NavLink不会渲染 */}
        <Route index element={<div>index</div>}></Route>
        <Route path='.NavLink1' element={<div>.NavLink1</div>}></Route>
        <Route path='.NavLink1' element={<div>.NavLink1</div>}></Route>
        <Route path='..NavLink1' element={<div>..NavLink1</div>}></Route>
        <Route path='NavLink1' element={<div>NavLink1</div>}></Route>
        <Route path='NavLink11' element={<div>NavLink11</div>}></Route>
        <Route path='style' element={<div>style</div>}></Route>
        <Route path='className' element={<div>className</div>}></Route>
       </Routes>
    </div>
   
  )
}
